<?php include _include(ADMIN_PATH.'view/htm/header.inc.htm');?>
<style type="text/css">
#wrapper{ background: #fff}
.fr{float: right;}
.fl{float: left;}
.card{border: 1px solid rgba(0, 0, 0, 0.125);box-shadow: 0px 0px 10px 0px #e2e2e2; margin-top:0px;}
.btn-default {color: #333;background-color: #fff;border-color: #ccc;}
.btn-default:hover {color: #333;background-color: #e6e6e6;border-color: #adadad;}
.card-header .label {display: inline-block;padding: .25em .4em;font-size: 75%;line-height: 1;color: #fff;white-space: nowrap;vertical-align: baseline;border-radius: .25rem;}
.card-header .label-success {background-color: #5cb85c;}
/*标题行*/
.card-title{border-bottom:1px dashed rgb(245, 245, 245); height: 50px;line-height: 30px;}
.card-title i,.nav-item i{display: inline-block; margin-right: 5px;}
/*TAB行*/
#myTab li{ padding: 0; }
#myTab li.nav-item.pull-right{ float: right; }
#myTab a{ display: inline-block;text-decoration: none; padding: 0.5rem 1rem 0.5rem 1rem }
#myTab a:hover{color:#000; background: #F9F9F9}
#myTab a.active{ background-color:#fff; }
/*TAB内容*/
.tab-content{ margin-bottom: 10px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
/*form内容*/
.form-group { padding: 0.5rem 1rem;border-bottom: 1px dashed rgba(226, 226, 226, 0.46);margin-bottom: 0;}
.form-group b{ font-weight: normal; }
.form-group p,.form-group label{ margin-bottom: 0; }
.form-group p em{ font-style: normal; padding: 0 1rem }
.form-group label{font-size:0.85rem;}
.form-group .form-control-label b{font-size: 12px;padding:0px 4px; border:solid 1px #e2e2e2;display:inline-block;color:#333;background: #f2f2f2;border-radius: 2px; font-weight: normal;font-family:courier new, sans-serif; margin: 0px 2px 2px 0px;}
.form-group .form-control-label b.z-js{background: #f0ad4e;color:#fff;border:none;}
.form-group .form-control-label b.z-jq{background: #6AB3DE;color:#fff;border:none;}
.form-group .form-control{box-shadow:0px 1px 5px 0px #e2e2e2 inset;}
.form-group .form-control:focus { box-shadow:0px 1px 5px 0px #E2F1FF inset;border-color: #9BC9EF;}
/*table */
.table-responsive table th,.table-responsive table td{font-size: 0.75rem}
.table-responsive table .form-control{font-size: 0.75rem;padding: 0.25rem}
.table-responsive table .custom-select{font-size: 0.75rem;padding: 0.25rem 1.5rem 0.25rem 0.5rem}
</style>
<div class="row">
	<div class="col-lg-12">

		<div class="card">

			<div class="card-header"> 
					<div class="row">
						<div class="col-lg-4"><p class="m-y-xs text-muted fl"><img src="../plugin/huux_style_one/icon.png" height="24" width="24" class="m-r-xs">大白笔记模板<span class="m-l-xs label label-success">v1.4</span></p></div>
						<div class="col-lg-8 text-right ">
							<div class="btn-group">
							<a class="btn btn-default text-muted btn-sm" target="_blank" href="//huux.cc/forum-14.htm" role="button">问题反馈</a>
								<a class="btn btn-default text-muted btn-sm" target="_blank" href="https://jq.qq.com/?_wv=1027&k=4B02i5s" role="button"><i class="icon-qq"></i></a>
								<a class="btn btn-default text-muted btn-sm" href="<?php echo url("plugin-setting-huux_style_one");?>" role="button"><i class="icon-refresh"></i></a>
								<a class="btn btn-default text-muted btn-sm" href="<?php echo url("plugin");?>" role="button"><i class="icon-times"></i></a>
							</div>
						</div>
					</div>
				</div>
			<!-- card-block start -->
			<div class="card-block">
			<form action="<?php echo url('plugin-setting-huux_style_one');?>" method="post" id="form">
				<!-- tab -->
				<ul class="nav nav-tabs" role="tablist" id="myTab">
				  <li class="nav-item active"><a href="#tab1"  class="nav-link">基本设置</a></li>
				  <li class="nav-item"><a href="#tab3"  class="nav-link">背景设置</a></li> 
				  <li class="nav-item"><a href="#tab5"  class="nav-link">外观设置</a></li> 
				  <li class="nav-item"><a href="#tab2"  class="nav-link">组件开关</a></li>
				  <li class="nav-item"><a href="#tab4"  class="nav-link">主题列表</a></li>


				</ul>

				<div class="tab-content card-block">
				    <!-- tab1 -->
					<div class="tab-pane active" id="tab1">
							  
							    <div class="form-group row">
									<label class="col-sm-2 form-control-label">logo文字：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_logo']; ?> 
										<p class="m-b-sm m-t-sm text-grey small">可以直接输入文字或者输入代码，例如：&lt;img src="view/img/logo.png" class="logo-sm"&gt;</p>
									</div>

								</div>
								
					</div>
					<!-- tab5 -->
					<div class="tab-pane" id="tab5">
							  
							    <div class="form-group row">
									<label class="col-sm-2 form-control-label">布局控制：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_col_index']; ?> 
										<p class="m-b-sm m-t-sm text-grey small">xiuno默认为9:3，大白笔记模板默认为2:10</p>
									</div>
								</div>
					</div>
								
					<!-- tab3 -->
					<div class="tab-pane" id="tab3">
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">背景图片：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_background']; ?> 
										<p class="m-b-sm m-t-sm text-grey small">请输入一个图片的地址，例如：./plugin/huux_style_one/view/img/bg.gif</p>
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">背景颜色：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_background_color']; ?> 
										<p class="m-b-sm m-t-sm text-grey small">请输入颜色代码，例如：#ededed</p>
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">背景对齐：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_background_position']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">背景显示：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_background_repeat']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">背景定位：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_background_attachment']; ?> 
									</div>
								</div>
								
					</div>
					<!-- tab2 -->
					<div class="tab-pane" id="tab2">
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">版块介绍：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_forum_info']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">站点介绍：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_site_brief']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">统计信息：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_site_count']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">最新会员：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_site_user']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">作者信息：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_thread_user']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">作者最近主题：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_thread_userthread']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">首页板块页目录：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_index_menu']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">主题页目录：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_thread_menu']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">返回顶部：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_thread_back']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">版块页上分页：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_forum1_pagination_header']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">头部导航：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_site_headernav']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">分享和上下主题：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_thread_cardfooter']; ?> 
									</div>
								</div>
							
					</div>
					<!-- tab2 over-->
					<!-- tab4 -->
					<div class="tab-pane" id="tab4">
							    
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">主题列表头像：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_threadlist1_avatar']; ?> 
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">主题列表标题长度</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_title_length']; ?> 
										<p class="m-b-sm m-t-sm text-grey small">请输入一个数值，默认0为不截取，如果填写20，表示截取标题长度的20个字符。</p>
									</div>
								</div>
								<div class="form-group row">
									<label class="col-sm-2 form-control-label">主题列表缩略图：</label>
									<div class="col-sm-10 small">
										<?php echo $input['hso_threadlist1_imgs']; ?> 
									</div>
								</div>
								
								
					</div>



			  </div>
			  <!-- tab end-->
					<div class="row">
							<label class="col-sm-2 form-control-label"></label>
							<div class="col-sm-2 m-b-sm">
								<button type="submit" class="btn btn-primary btn-block" id="submit" data-loading-text="<?php echo lang('submiting');?>..."><?php echo lang('confirm');?></button>
							</div>
							<div class="col-sm-2 m-b-sm">
								<a role="button" class="btn btn-secondary btn-block" href="javascript:history.back();"><?php echo lang('back');?></a>
							</div>
					</div>
				</form>

			</div>
			<!-- card-block end -->
			<div class="card-footer text-right"><p class="m-y-xs text-muted  text-small">20170728</p></div>
	    </div>
	</div>
</div>

<?php include _include(ADMIN_PATH.'view/htm/footer.inc.htm');?>

<script>
var jform = $("#form");
var jsubmit = $("#submit");
var referer = '<?php echo url("plugin-setting-huux_style_one");?>';
jform.on('submit', function(){
	jform.reset();
	jsubmit.button('loading');
	var postdata = jform.serialize();
	console.log(postdata);
	$.xpost(jform.attr('action'), postdata, function(code, message) {
		if(code == 0) {
			$.alert(message.b);
			jsubmit.text(message.a).delay(1000).button('reset');
			return;
		} else {
			$.alert(message.c);
			jsubmit.button('reset');
		}
	});
	return false;
});

//tab
$(function () {
    $('#myTab a:first').tab('show');
    $('#myTab a').click(function (e) {
	  e.preventDefault()
	  $(this).tab('show')
    });
})

</script>